<script lang="ts">

import { defineComponent } from 'vue'
import { mergePagingArguments } from "./utils";
export default defineComponent({
  name: "MoTable",
  props: {
    /**
     * table 数据列表
     * [注意] 如果data 存在 则优先级高于下面 attrs 中的 data
     */
    data: Array,
    /**
     * table Attributes 属性
     * https://element.eleme.cn/#/zh-CN/component/table#table-attributes
     */
    attrs: {
      type: Object,
      default: () => {
        return {
          size: "small",
          stripe: true,
          border: true,
          "show-header": true,
        };
      },
    },
    /**
     * table events 事件
     * https://element.eleme.cn/#/zh-CN/component/table#table-events
     */
    events: Object,
    /**
     * table 列配置
     * [注意] Scoped Slot 通过 scopedSlots 属性指定
     */
    cols: {
      type: Array,
      default: () => [],
    },
    /**
     * 分页器参数 不传则不显示
     * https://element.eleme.cn/#/zh-CN/component/pagination#attributes
     */
    paging: {
      type: Object,
      default: () => {},
    },
    /**
     * 分页器事件
     */
    pagingEvents: {
      type: Object,
      default: () => {},
    },
  },
  setup(props,ctx){
    console.log(props)
    const data = props.data
    const attrs = props.attrs.data
    if (data && attrs.data) {
      delete attrs.data;
    }
    const pagingEvents = props.pagingEvents
    const paging = props.paging
    const cols = props.cols
    const events = props.events
    const indexMethod = (index)=>{
      if (paging && paging.total < 10) {
        paging.currentPage = 1;
      }
      if (paging) {
        index = (paging.currentPage - 1) * paging.pageSize + index + 1;
      } else {
        index = index + 1;
      }
      return index;
    }
    const localPaging = computed(()=>{
      return paging
        ? mergePagingArguments(paging, "attrs")
        : undefined;
    })
    const {emit} = cxt
    return ()=>{
      <div>
        <el-row type="flex" justify="center" v-show={attrs.title}>
          <el-col span={24}>
            <div class="tip-item top-10">
              <div class="block"></div>
              <span>{attrs.title}</span>
            </div>
          </el-col>
        </el-row>
        <div class="mo_table">
          {/* table */}
          <el-table
            style="width: 100%"
            data={ data || []}
            {...{ attrs: attrs }}
            {...{ on: events }}
            ref={attrs.ref}
            row-key={attrs.rowKey}
            empty-text="暂无数据"
            header-cell-class-name={
              attrs["header-cell-class-name"] || "table_one_header"
            }
           >
            {/* table 列   index={index+1}*/}
            {cols.map((col, index) => {
              const { scopedSlots } = col;
              return (
                <el-table-column
                  show-overflow-tooltip
                  align={col.align || "center"}
                  key={index}
                  index={indexMethod}
                  sortable={col.sortable}
                  fixed={col.fixed}
                  {...{ attrs: col }}
                  label={col.label}
                  scopedSlots={scopedSlots}
                >
                  {col.slot}
                </el-table-column>
              );
            })}
          </el-table>
          {/* 分页器 不传入 paging prop 则不显示 */}
          {localPaging ? (
            <el-pagination
             
              {...{ attrs: localPaging }}
              {...{
                on: {
                  "size-change": (size) =>
                    emit("paging", "size-change", size),
                  "current-change": (page) =>
                    emit("paging", "current-change", page),
                },
              }}
            />
          ) : null}
        </div>

      </div>
    }
  }
})
</script>
<style lang='scss'  scoped>



</style>